﻿@{
    ViewBag.Title = "SimpleSprite";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Simple Sprite</h2>

<script type="text/javascript">
    var stage;
    function init() {

        // create a new stage and point it at our canvas:
        stage = new createjs.Stage(document.getElementById("testCanvas"));

        // Define a spritesheet. Note that this data was exported by Zoë.
        var ss = new createjs.SpriteSheet({
            "animations":
            {
                "run": [0, 11, "aa"],
                "aa": [12, 23, "run"]
            },
            "images": ["/assets/fatrunjump.png"],
            "frames":
                {
                    "height": 400,
                    "width": 550,
                    "regX": 0,
                    "regY": 0,
                    "count": 24
                }
        });

        var grant = new createjs.Sprite(ss, "run");
        grant.x = 0;
        grant.y = 0;

        // Add Grant to the stage, and add it as a listener to Ticker to get updates each frame.
        stage.addChild(grant);
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick", stage);
    }
</script>

<div class="canvasHolder">
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
